<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<title>内容</title>
	<link rel="stylesheet" href="css/core.css">
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/iphone-inline-video.min.js"></script>
</head>
<body>
<section class="video-content" style="height:100vh;background:#000;">
	
	<div class="video-user-info">
		<a href="#" class="back"><img src="images/back.png" /></a>
		<div class="user-box">
			<img src="images/avatar.png" />
			<h2>刘小姐</h2>
			<i>+关注</i>
			<p>无边泳池，i了i了</p>
		</div>
	</div>
	<div class="video-right-box">
		<ul>
			<li><a href="#"><img src="images/share.png" /><br/>点击分享</a></li>
			<li><a href="#"><img src="images/give.png" /><br/>双击点赞</a></li>
			<li><a href="#"><img src="images/comment.png" /><br/>点击评论</a></li>
			<li><a href="#"><img src="images/collection.png" /><br/>点击收藏</a></li>
		</ul>
	</div>
	<div class="video-bottom-box">
		<i>曲阜路万达广场2号楼xxxx店<br />距离你12.3km</i>
		<a href="#">立即购买</a>
		<a href="#">进入分类</a>
		<em><img src="images/content-wx.png" /><br />联系我</em>
	</div>
	<div class="play"><img src="images/play.png" /></div>
	<img src="images/prod-con.jpg" class="video-img" />
	<video id="video_info" preload="auto" src="http://www.ymyp99.com/1122/images/1111.mp4" page-gesture="true" x5-playsinline="" playsinline="" webkit-playsinline="" show-fullscreen-btn="false" show-center-play-btn="true" show-play-btn="false" enable-play-gesture="true" loop="true">你的浏览器不支持HTML5播放此视频</video>
</section>

<script type="text/javascript">
$(function(){
	$(".play").click(function(){
		$(".video-img").hide();
		var video = document.querySelector('#video_info');
		video.display = 'block';
    	video.play();
		$(this).hide();
	});
});
</script>

</body>
</html>